<template>
  <BaseSpace
    class="goods-price"
    :class="reverse ? 'goods-price--reverse' : ''"
    align="baseline"
    justify="between"
    size="xs"
    fill
  >
    <BasePrice v-if="fakePrice" is-fake size="xs" :price="fakePrice" />
    <BasePrice is-primary size="md" :is-bold="false" v-bind="$attrs" />
  </BaseSpace>
</template>

<script setup>
defineProps({
  fakePrice: [String, Number],
  reverse: Boolean,
});
</script>

<style lang="scss" scoped>
.goods-price--reverse {
  flex-direction: row-reverse;
  gap: var(--dx-gap-xs);
}
</style>
